<template>
  <div class="image-converter">
    <el-card class="tool-card">
      <template #header>
        <div class="card-header">
          <h2>图片格式转换</h2>
          <div class="header-actions">
            <!-- 删除使用说明按钮 -->
          </div>
        </div>
      </template>
      
      <!-- 使用指南 -->
      <section class="usage-section">
        <div class="usage-wrapper">
          <div class="usage-title-section">
            <el-icon size="28" class="usage-icon"><Guide /></el-icon>
            <h2>快速使用指南</h2>
          </div>
          <div class="usage-content">
            <div class="guide-steps">
              <div class="step-item">
                <div class="step-number">1</div>
                <div class="step-content">
                  <h4>上传图片</h4>
                  <p>将图片拖拽到上传区域或点击上传</p>
                </div>
              </div>
              <div class="step-item">
                <div class="step-number">2</div>
                <div class="step-content">
                  <h4>选择格式</h4>
                  <p>在下拉菜单中选择要转换的目标格式</p>
                </div>
              </div>
              <div class="step-item">
                <div class="step-number">3</div>
                <div class="step-content">
                  <h4>调整质量</h4>
                  <p>根据需要调整输出质量和压缩率</p>
                </div>
              </div>
              <div class="step-item">
                <div class="step-number">4</div>
                <div class="step-content">
                  <h4>获取结果</h4>
                  <p>转换完成后预览效果并下载图片</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 上传区域 -->
      <div class="upload-area">
        <el-upload
          class="image-uploader"
          action="#"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handleFileChange"
          accept="image/jpeg,image/png,image/gif,image/webp,image/bmp,image/tiff"
          drag
        >
          <el-icon class="upload-icon"><Upload /></el-icon>
          <div class="upload-text">
            <span>将图片拖到此处，或<em>点击上传</em></span>
            <p class="upload-hint">支持JPG、PNG、GIF、WebP、BMP、TIFF格式，单个文件不超过10MB</p>
          </div>
        </el-upload>
      </div>
      
      <!-- 转换设置 -->
      <div v-if="imageUrl" class="converter-settings">
        <el-form :model="convertSettings" label-position="top" label-width="120px">
          <el-form-item label="原始图片">
            <div class="image-preview">
              <img :src="imageUrl" alt="原始图片" />
              <div class="image-info">
                <p><strong>文件名：</strong>{{ fileName }}</p>
                <p><strong>格式：</strong>{{ originalFormat }}</p>
                <p><strong>尺寸：</strong>{{ imageSize.width || '?' }} × {{ imageSize.height || '?' }} px</p>
                <p><strong>文件大小：</strong>{{ fileSize }}</p>
              </div>
            </div>
          </el-form-item>
          
          <el-form-item label="转换目标格式">
            <el-select v-model="convertSettings.targetFormat" placeholder="选择目标格式">
              <el-option v-for="format in availableFormats" :key="format.value" :label="format.label" :value="format.value" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="质量设置" v-if="['jpg', 'webp'].includes(convertSettings.targetFormat)">
            <div class="quality-slider">
              <span>{{ convertSettings.quality }}%</span>
              <el-slider 
                v-model="convertSettings.quality" 
                :min="10" 
                :max="100" 
                :step="5"
              />
            </div>
            <div class="quality-description">
              <el-alert
                type="info"
                :closable="false"
                :title="qualityDescription"
              />
            </div>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="convertImage">转换</el-button>
            <el-button @click="resetConverter">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 转换结果 -->
      <div v-if="convertedImageUrl" class="converted-result">
        <h3>转换结果</h3>
        <div class="result-preview">
          <img :src="convertedImageUrl" alt="转换后的图片" />
          <div class="result-info">
            <p><strong>格式：</strong>{{ convertSettings.targetFormat.toUpperCase() }}</p>
            <p v-if="convertedFileSize"><strong>文件大小：</strong>{{ convertedFileSize }}</p>
            <p v-if="convertedFileSize && fileSize">
              <strong>大小变化：</strong>
              <span :class="sizeChangeClass">{{ sizeChangePercentage }}</span>
            </p>
          </div>
        </div>
        <div class="result-actions">
          <el-button type="success" @click="downloadConvertedImage">下载图片</el-button>
          <el-button @click="newConversion">重新转换</el-button>
        </div>
      </div>
      
      <!-- 开发中提示 -->
      <el-alert
        title="功能开发中"
        type="warning"
        description="图片格式转换功能正在开发中，即将上线！"
        :closable="false"
        show-icon
        style="margin-top: 20px;"
      />
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { Upload, Guide } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';

// 路由实例
const router = useRouter();

// 状态变量
const imageUrl = ref('');
const fileName = ref('');
const originalFormat = ref('');
const fileSize = ref('');
const imageSize = ref({ width: 0, height: 0 });
const convertedImageUrl = ref('');
const convertedFileSize = ref('');

// 转换设置
const convertSettings = ref({
  targetFormat: 'webp',
  quality: 80
});

// 可用格式
const availableFormats = [
  { label: 'WebP - 最佳压缩率', value: 'webp' },
  { label: 'JPG - 兼容性最好', value: 'jpg' },
  { label: 'PNG - 支持透明', value: 'png' },
  { label: 'GIF - 支持动画', value: 'gif' }
];

// 质量描述
const qualityDescription = computed(() => {
  const quality = convertSettings.value.quality;
  if (quality >= 90) return '高质量 - 文件较大，视觉效果最好';
  if (quality >= 70) return '均衡 - 文件大小和视觉质量的平衡';
  if (quality >= 50) return '压缩 - 文件较小，可能有轻微质量损失';
  return '低质量 - 文件最小，但质量有明显损失';
});

// 大小变化百分比
const sizeChangePercentage = computed(() => {
  // 未实现实际功能，这里仅做模拟
  return '节省了 25%';
});

// 大小变化样式类
const sizeChangeClass = computed(() => {
  return 'size-reduction';
});

// 文件上传处理
const handleFileChange = (file) => {
  ElMessage.warning('图片格式转换功能正在开发中，即将上线！');
  
  // 仅做示例，实际功能未实现
  if (file && file.raw) {
    const isImage = file.raw.type.indexOf('image/') !== -1;
    const isLt10M = file.raw.size / 1024 / 1024 < 10;
    
    if (!isImage) {
      ElMessage.error('只能上传图片文件!');
      return false;
    }
    
    if (!isLt10M) {
      ElMessage.error('图片大小不能超过10MB!');
      return false;
    }
    
    fileName.value = file.raw.name;
    originalFormat.value = file.raw.type.split('/')[1].toUpperCase();
    fileSize.value = formatFileSize(file.raw.size);
    
    // 读取图片并显示
    const reader = new FileReader();
    reader.readAsDataURL(file.raw);
    reader.onload = (e) => {
      imageUrl.value = e.target.result;
      
      // 获取图片尺寸
      const img = new Image();
      img.src = e.target.result;
      img.onload = () => {
        imageSize.value = {
          width: img.width,
          height: img.height
        };
      };
    };
  }
};

// 格式化文件大小
const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i];
};

// 转换图片
const convertImage = () => {
  ElMessage.warning('图片格式转换功能正在开发中，即将上线！');
  // 实际功能未实现，这里仅做示例
  convertedImageUrl.value = imageUrl.value;
  convertedFileSize.value = fileSize.value;
};

// 重置转换器
const resetConverter = () => {
  convertSettings.value = {
    targetFormat: 'webp',
    quality: 80
  };
  
  ElMessage.info('已重置转换设置');
};

// 下载转换后的图片
const downloadConvertedImage = () => {
  ElMessage.warning('下载功能正在开发中，即将上线！');
  // 实际功能未实现，这里仅做示例
};

// 重新转换
const newConversion = () => {
  convertedImageUrl.value = '';
  convertedFileSize.value = '';
};

// 升级会员
const handleUpgrade = () => {
  // 使用 Vue Router 导航到会员页面，使用命名路由而不是路径
  router.push({ name: 'membership' });
};
</script>

<style scoped>
.image-converter {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h2 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.usage-guide {
  margin-bottom: 20px;
}

.guide-steps {
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
  margin-top: 10px;
}

.guide-steps ol {
  margin: 0;
  padding-left: 20px;
}

.guide-steps li {
  margin-bottom: 5px;
}

.upload-area {
  margin-bottom: 20px;
}

.upload-text {
  margin-top: 10px;
}

.upload-hint {
  color: #909399;
  font-size: 12px;
  margin-top: 5px;
}

.upload-icon {
  font-size: 30px;
  color: #c0c4cc;
  margin-bottom: 8px;
}

.converter-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.image-preview {
  flex: 1;
  min-width: 320px;
}

.format-settings {
  flex: 1;
  min-width: 320px;
}

.image-preview img {
  max-width: 250px;
  max-height: 250px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

.image-info {
  flex: 1;
}

.image-info p {
  margin: 5px 0;
}

.quality-slider {
  display: flex;
  align-items: center;
  gap: 15px;
}

.quality-slider span {
  width: 50px;
  text-align: right;
}

.quality-description {
  margin-top: 10px;
}

.converted-result {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.converted-result h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  color: #303133;
}

.result-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.result-preview img {
  max-width: 100%;
  flex: 1;
  min-width: 300px;
}

.result-info {
  flex: 1;
  min-width: 300px;
}

.result-info p {
  margin: 5px 0;
}

.size-reduction {
  color: #67c23a;
  font-weight: bold;
}

.size-increase {
  color: #f56c6c;
  font-weight: bold;
}

.result-actions {
  display: flex;
  gap: 15px;
  margin-top: 15px;
}

@media (max-width: 768px) {
  .image-preview, .result-preview {
    flex-direction: column;
  }
  
  .image-preview img, .result-preview img {
    max-width: 100%;
  }
  
  .result-actions {
    flex-direction: column;
  }
}

.usage-section {
  margin-top: 36px;
  padding: 0 12px;
  margin-bottom: 32px;
}

.usage-wrapper {
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid #ebeef5;
}

.usage-title-section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.usage-icon {
  color: #3498db;
}

.usage-title-section h2 {
  margin: 0;
  color: #303133;
  font-size: 20px;
  font-weight: 600;
}

.usage-content {
  display: flex;
  flex-direction: column;
}

.guide-steps {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.step-item {
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background-color: white;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
}

.step-content h4 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.step-content p {
  margin: 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .guide-steps {
    flex-direction: column;
  }
}
</style> 